<template>
  <div class="vui-select" :class="vclass">
      <div ref="button" class="vui-select-button" @mousedown.stop="" @click.stop="buttonClick($event)">
          <span v-if="selectedLabel" class="vui-select-text">{{selectedLabel}}</span>
          <span v-else class="vui-select-placeholder">{{placeholder}}</span>
          <span class="vui-select-icon"></span>
      </div>
      <v-scrollbar :style="{'width':width + 'px','height':6 * 28 + 2 + 'px','left':panelLeft + 'px','top':panelTop + height + 'px','z-index':zIndex}" class="vui-select-panel" v-show="showPanel">
          <ul>
              <li v-if="multiple" :class="{'vui-select-option':true,'vui-select-option-selected': selectedAll}" :data-value="selectedAllValue" @mousedown.stop="" @click.stop="selectAll($event)">{{selectedAll?'取消全部':'全部'}}</li>
              <li v-for="option in currentOptions" :class="{'vui-select-option':true,'vui-select-option-selected': (multiple?(selectedValue?(selectedValue.indexOf(option.value)>=0):(option.value == selectedValue)):false)}" :data-value="option.value" @mousedown.stop="" @click.stop="itemClick($event,option)">{{option.label}}</li>
          </ul>
      </v-scrollbar>
  </div>
</template>
<script>
import {vScrollbar} from '../api';
import {DomHandler} from '../common/domhandler';
import {Event} from '../event/event';
export default {
    props: {
        options: Array,
        value: {
            type: Array,
            default: []
        },
        placeholder: {
            type: String,
            default: '点击选择',
        },
        filter: Boolean,
        multiple: Boolean,
        vclass: String
    },

    data: function(){
        return {
            currentOptions:Array,
            currentOptionStart: 0,
            currenOptionLength: 100,
            width:0,
            height:0,
            button:null,
            showPanel: false,
            panelLeft: 0,
            panelTop: 0,
            selectedOptions: [],
            selectedAll:false,
            selectedAllValue:null,
        }
    },

    watch:{
        options:function(val){
            this.currentOptionStart = 0;
            this.currentOptions = val.slice(this.currentOptionStart,this.currentOptionStart + this.currenOptionLength);
            this.currentOptionStart += this.currenOptionLength;
        }
    },

    computed: {
        selectedValue:function(){
            let values = [];
            this.selectedOptions.map((option) => {
                values.push(option.value);
            });
            return values;
        },
        selectedLabel:function(){
            let labels = [];
            this.selectedOptions.map((option) => {
                labels.push(option.label);
            });
            return labels.join(',');
        },
        zIndex:function(){
            let zIndex = 1;
            if(this.button){
                zIndex = DomHandler.getComputedStyle(this.button, 'zIndex') + 1;
            }
            return zIndex;
        }
    },

    created:function(){
        this.$nextTick(() => {
            this.button = this.$refs.button;
            let selectedOptions = [];
            if(this.multiple){
                this.options.map((option) => {
                    if(this.value.indexOf(option.value) >= 0){
                        selectedOptions.push(option);
                    }
                });
            } else {
                this.options.map((option) => {
                    if(this.value.indexOf(option.value) >= 0){
                        selectedOptions = [option];
                    }
                });
            }
            this.selectedOptions = selectedOptions;
            this.currentOptions = this.options.slice(this.currentOptionStart, this.currentOptionStart + this.currenOptionLength);
            this.currentOptionStart += this.currenOptionLength;

            Event.$on('vupdate',() => {
                this.updatePosition();
            });
        });
    },

    updated: function(){
        this.updatePosition();
    },
    

    methods: {
        buttonClick(event){
            this.showPanel = !this.showPanel;
            if(this.showPanel){
                document.body.addEventListener('mousedown',this.panelListener)
            } else {
                document.body.removeEventListener('mousedown',this.panelListener);
            }
        },
        itemClick(event,option){
            if(this.multiple){
                let index = this.selectedOptions.indexOf(option);
                if( index >= 0){
                    this.selectedOptions.splice(index,1);
                } else {
                    this.selectedOptions.push(option);
                }
            } else {
                this.selectedOptions = [option];
                this.showPanel = false;
            }
        },
        panelListener(evnet){
            this.showPanel = false;
        },
        selectAll(event){
            if(this.selectedAll){
                this.selectedOptions = [];
                this.selectedAll = false;
            } else {
                let selectedOptions = [];
                this.currentOptions.forEach((item) => {
                    selectedOptions.push(item);
                });
                this.selectedOptions = selectedOptions;
                this.selectedAll = true;
            }
            
        },
        updatePosition(){
            let offset = DomHandler.getFixedPosition(this.button);
            this.width = DomHandler.width(this.button);
            this.height = DomHandler.height(this.button);
            this.panelLeft = offset.left;
            this.panelTop = offset.top;
        }
    },

    components: {
        vScrollbar
    }
}
</script>

export default {
    
}
